<template>
    <div style="margin-top:10px;">
        <a-spin :loading="loading" style="width:100%;">
        <div style="display:flex; align-item:center;color:#9C9C9C; margin:10px 0;">
            <div style="flex:1;">更新时间：{{updateDate}}</div>
            <div>单位：元</div>
        </div>
            <div style="height:485px">
                <a-table ref="exportTableRef" :columns="columns" :data="data" :scroll="{y:445 }" :pagination="false"></a-table>
            </div>
        </a-spin>
    </div>
</template>
<script setup>
    import { reactive, ref, onMounted } from 'vue';
    import tool from '@/utils/tool'
    import financialAccountsPayable from '@/api/financial/financialAccountsPayable'
    const loading = ref(false)
    const updateDate = ref('')
    onMounted(() => {
        updateDate.value = tool.dateFormat(new Date())
        getList()   
        
    })
    const getList = () => {
        loading.value = true
        financialAccountsPayable.getList({page:1,pageSize:500}).then((res) => {
            console.log(res)
            if (res.code == 200 && res.success) {
                
                let list = []
                res.data.items.forEach(e => {
                    if(e.payable_amounts > 0){
                        list.push(e)
                    }
                })
                data.value = list
                loading.value = false
                updateDate.value = tool.dateFormat(new Date())
            }else{
                console.log(e)
                loading.value = false
            }
        }).catch((e) => {
            console.log(e)
            loading.value = false
        })
    }
    const columns = [
      {
        title: '客户名称',
        dataIndex: 'dept.name',
        ellipsis: true,
        width: 300,
        headerCellStyle:{
            backgroundColor:'#FAFAFA',
            fontWeight:'bold',
            color:'#000'
        }
      },
      {
        title: '期初金额',
        dataIndex: 'initial_amounts',
        headerCellStyle:{
            backgroundColor:'#FAFAFA',
            fontWeight:'bold',
            color:'#000'
        }
      },
      {
        title: '业务发生额',
        dataIndex: 'occurrence_amounts',
        headerCellStyle:{
            backgroundColor:'#FAFAFA',
            fontWeight:'bold',
            color:'#000'
        }
      },
      {
        title: '已付金额',
        dataIndex: 'paid_amounts',
        headerCellStyle:{
            backgroundColor:'#FAFAFA',
            fontWeight:'bold',
            color:'#000'
        }
      },
      {
        title: '应付金额',
        dataIndex: 'payable_amounts',
        headerCellStyle:{
            backgroundColor:'#FAFAFA',
            fontWeight:'bold',
            color:'#000'
        }
      }
    ];
    const data = ref([]);

</script>